<template>
	<div class="dl">
		<el-form ref="form" :model="formData" label-width="80px" :rules="rules" hide-required-asterisk>
			<h2>胖虎到家-后台登录</h2>
			<el-form-item label="账号" prop="username">
				<el-input prefix-icon="el-icon-user" v-model="formData.username" placeholder="请输入账号"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" prefix-icon="el-icon-lock" v-model="formData.password"
					placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">登录</el-button>
				<el-button @click="reset">取消</el-button>
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: 'admin',
					password: 'admin'
				},
				rules: {
					username: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 9,
							message: '长度在 2 到 9 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 9,
							message: '长度在 2 到 9 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},
		methods: {
			submit() {
				this.$refs['form'].validate((valid) => {
						if (valid) {
							this.$http.post('http://43.143.190.87:8182/login?username=' + this.formData.username +
									'&pwd=' + this.formData.password)
								.then(res => {
									if (res.data.code == 1) {
										this.$message.success('登录成功！')
										this.$router.push('./main')
									} else {
										this.$message.error('服务器异常！')
									}
								})
								.catch(error => {
									this.$message.error('服务器异常！')
								})
						} else {
							this.$message.error('请输入正确的账号或密码！')
							return false;
						}
					}

				)
			},
			reset() {
				this.$refs['form'].resetFields();
			}

		}
	}
</script>

<style scoped="scoped">
	.dl {
		height: 100vh;
		background-image: url(../assets/bj.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.el-form {
		width: 600px;
		height: 350px;
		background: rgba(255, 255, 255, 0.8);
		margin: 0 auto;
		border-radius: 20px;
		margin-top: 200px;
		box-sizing: border-box;
		padding-top: 40px;
	}

	.el-form h2 {
		text-align: center;
	}

	.el-input {
		width: 400px;
		text-align: center;
	}
</style>